import { usageExamples } from "@/service/example";
import { Line } from "@ant-design/charts";
import {
  DollarOutlined,
  RiseOutlined,
  ShoppingCartOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { ProCard, StatisticCard } from "@ant-design/pro-components";
import { Col, Row, Statistic } from "antd";

import React, { useEffect } from "react";

const Dashboard: React.FC = () => {
  useEffect(() => {
    usageExamples();
  }, []);

  const data = [
    { year: "1991", value: 3 },
    { year: "1992", value: 4 },
    { year: "1993", value: 3.5 },
    { year: "1994", value: 5 },
    { year: "1995", value: 4.9 },
    { year: "1996", value: 6 },
    { year: "1997", value: 7 },
    { year: "1998", value: 9 },
    { year: "1999", value: 13 },
  ];

  const config = {
    data,
    height: 400,
    xField: "year",
    yField: "value",
    style: {
      lineWidth: 2,
    },
  };
  return (
    <div style={{ padding: 24 }}>
      <h1>仪表板1</h1>
      <Line {...config} />;
      <Row gutter={[16, 16]}>
        <Col span={6}>
          <StatisticCard
            statistic={{
              title: "总用户数",
              value: 112893,
              prefix: <UserOutlined />,
            }}
          />
        </Col>
        <Col span={6}>
          <StatisticCard
            statistic={{
              title: "订单数量",
              value: 8846,
              prefix: <ShoppingCartOutlined />,
            }}
          />
        </Col>
        <Col span={6}>
          <StatisticCard
            statistic={{
              title: "总收入",
              value: 112893,
              prefix: <DollarOutlined />,
              suffix: "元",
            }}
          />
        </Col>
        <Col span={6}>
          <StatisticCard
            statistic={{
              title: "增长率",
              value: 11.28,
              prefix: <RiseOutlined />,
              suffix: "%",
            }}
          />
        </Col>
      </Row>
      <ProCard style={{ marginTop: 16 }}>
        <Statistic title="活跃用户" value={11280} />
      </ProCard>
    </div>
  );
};

export default Dashboard;
